<template>
    <div class="bed-type-page">
      <h2 class="title">请选择床型</h2>
      <div class="bed-type-list">
        <div
          v-for="bed in bedTypes"
          :key="bed.id"
          :class="['bed-type-item', { selected: selectedBed && selectedBed.id === bed.id }]"
          @click="selectBed(bed)"
        >
          <img :src="bed.image" class="bed-img" />
          <div class="bed-info">
            <div class="bed-name">{{ bed.name }}</div>
            <div class="bed-desc">{{ bed.desc }}</div>
          </div>
        </div>
      </div>
      <el-button
        type="primary"
        size="large"
        class="confirm-btn"
        :disabled="!selectedBed"
        @click="confirm"
      >确认选择</el-button>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue'
  import { ElMessage } from 'element-plus'
  
  const bedTypes = ref([
    {
      id: 1,
      name: '大床',
      desc: '1.8m*2m，适合情侣或单人入住',
      image: require('@/assets/bed1.jpg'),
    },
    {
      id: 2,
      name: '双床',
      desc: '2张1.2m*2m单人床，适合朋友或家人',
      image: require('@/assets/bed2.jpg'),
    },
    {
      id: 3,
      name: '圆床',
      desc: '2.2m直径，浪漫舒适',
      image: require('@/assets/bed3.jpg'),
    },
    {
      id: 4,
      name: '榻榻米',
      desc: '日式风格，适合亲子或多人',
      image: require('@/assets/bed4.jpg'),
    },
    {
      id: 5,
      name: '上下铺',
      desc: '适合多人出行，经济实用',
      image: require('@/assets/bed5.jpg'),
    },
  ])
  
  const selectedBed = ref(null)
  
  function selectBed(bed) {
    selectedBed.value = bed
  }
  
  function confirm() {
    if (!selectedBed.value) {
      ElMessage.warning('请选择床型')
      return
    }
    ElMessage.success(`已选择：${selectedBed.value.name}`)
    // 这里可以 emit 事件或跳转页面，传递选中的床型
  }
  </script>
  
  <style scoped>
  .bed-type-page {
    max-width: 700px;
    margin: 0 auto;
    padding: 32px 16px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.06);
  }
  .title {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 24px;
    color: #222;
    text-align: center;
  }
  .bed-type-list {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: center;
    margin-bottom: 32px;
  }
  .bed-type-item {
    width: 180px;
    background: #f8f8f8;
    border-radius: 10px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.04);
    cursor: pointer;
    transition: box-shadow 0.2s, border 0.2s;
    border: 2px solid transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 8px;
  }
  .bed-type-item.selected {
    border: 2px solid #409eff;
    box-shadow: 0 2px 12px rgba(64,158,255,0.12);
    background: #e6f7ff;
  }
  .bed-img {
    width: 120px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 12px;
    background: #eee;
  }
  .bed-info {
    text-align: center;
  }
  .bed-name {
    font-weight: bold;
    font-size: 1.1rem;
    margin-bottom: 4px;
  }
  .bed-desc {
    color: #888;
    font-size: 0.95rem;
  }
  .confirm-btn {
    display: block;
    margin: 0 auto;
    padding: 0 40px;
    font-size: 1.1rem;
    border-radius: 10px;
  }
  </style>